<template>
  <el-row
    style="
      margin: 5px 0px 0px;
      height: 43px;
      display: flex;
      flex-wrap: nowrap;
      overflow: auto;
    "
  >
    <span
      style="
        vertical-align: middle;
        display: inline-block;
        padding-top: 2px;
        font-size: 13px;
        flex: none;
      "
      >查询条件：</span
    >
    <el-tag
      style="margin: 0px 5px 5px 0px; flex: none"
      v-for="tag in tags"
      :key="tag.prop || tag.start + '_' + tag.end"
      closable
      @close="removeTag(tag)"
    >
      {{ tag.desc }}：{{ tag.value }}
    </el-tag>
  </el-row>
  <el-form
    size="small"
    :inline="true"
    :model="query"
    label-width="40px"
    style="margin-bottom: 10px; position: relative; z-index: 100"
  >
    <el-row>
      <el-form-item label="状态" style="width: 150px" :style="elFormItemStyle">
        <el-select v-model="query.pd_id" @change="getPage(1)">
          <el-option label="全部" value=""></el-option>
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in ddo.storeStatus"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="成品号"
        style="width: 150px"
        label-width="50"
        :style="elFormItemStyle"
      >
        <el-input v-model="query.product_id"></el-input>
      </el-form-item>
      <el-form-item label="包号" style="width: 150px" :style="elFormItemStyle">
        <el-input v-model="query.store_id"></el-input>
      </el-form-item>

      <el-form-item :style="elFormItemStyle">
        <el-button :icon="Search" circle @click="getPage(1)"></el-button>
      </el-form-item>

      <el-form-item v-show="queryMore" :style="elFormItemStyle">
        <el-tooltip effect="dark" content="简化" placement="top-start">
          <el-button :icon="Fold" circle @click="queryMore = false"></el-button>
        </el-tooltip>
      </el-form-item>
      <el-form-item v-show="!queryMore" :style="elFormItemStyle">
        <el-tooltip effect="dark" content="更多筛选" placement="top-start">
          <el-button
            :icon="Expand"
            circle
            @click="queryMore = true"
          ></el-button>
        </el-tooltip>
      </el-form-item>
    </el-row>

    <transition name="slide-fade">
      <div
        v-show="queryMore"
        style="
          position: absolute;
          top: 39px;
          left: 0px;
          background-color: white;
          box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1);
          border-radius: 5px;
        "
      >
        <el-row>
          <el-form-item
            label="客户"
            style="width: 230px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.store_cus" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.info_name"
                :value="item.info_id"
                v-for="item in cusList"
                :key="item.info_id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="规格"
            style="width: 230px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.store_std" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.info_name"
                :value="item.info_id"
                v-for="item in stdList"
                :key="item.info_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="花色"
            style="width: 230px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.store_color" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.info_name"
                :value="item.info_id"
                v-for="item in colorList"
                :key="item.info_id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="类型"
            style="width: 120px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.plan_type" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in ddo.prodTypes"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="等级"
            style="width: 120px"
            :style="elFormItemStyle"
          >
            <el-select v-model="query.product_level" @change="getPage(1)">
              <el-option label="全部" value=""></el-option>
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in ddo.prodLevels"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="日期"
            style="width: 300px"
            :style="elFormItemStyle"
          >
            <el-col :span="11">
              <el-form-item style="width: 120px">
                <el-date-picker
                  v-model="query.date_start"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="开始日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center">
              <span style="color: #cccccc"> - </span>
            </el-col>
            <el-col :span="11">
              <el-form-item style="width: 120px">
                <el-date-picker
                  v-model="query.date_end"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-row>
      </div>
    </transition>
  </el-form>

  <el-table
    :data="page.list"
    :stripe="true"
    :fit="true"
    :max-height="tableMaxHeight"
    size="small"
    style="width: 100%; flex: auto"
  >
    <el-table-column fixed="left" prop="store_id" label="包装号" width="110" />
    <el-table-column fixed="left" prop="product_id" label="成品号" width="110" />
    <el-table-column fixed="left" prop="product_level" label="等级" width="60">
      <template #default="{ row }">
        <span style="padding:3px;border-radius:5px;" :style="{color:({'01':'#67C23A','02':'#E6A23C','03':'#F56C6C','04':'#73767a'})[row.product_level],backgroundColor:({'01':'#e1f3d8','02':'#faecd8','03':'#fde2e2','04':'#e9e9eb'})[row.product_level]}" >{{ ddo.text("prodLevels", row.product_level) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      fixed="left"
      prop="store_num"
      label="包装量(米)"
      width="80"
    />

    <el-table-column prop="pd_id" label="状态" width="70">
      <template #default="{ row }">        
        <span v-if="row.pkging" style="color:red;">待确认</span>
        <span  v-else style="font-weight:bold;color:#95d475;" >{{ ddo.text("storeStatus", row.pd_id) }}</span>
        
      </template>
    </el-table-column>

    <el-table-column prop="plan_type" label="类型" width="80">
      <template #default="{ row }">
        {{ ddo.text("prodTypes", row.plan_type) }}
      </template>
    </el-table-column>
    <el-table-column prop="std_name" label="规格" />
    <el-table-column prop="color_name" label="花色" />
    <el-table-column prop="cus_name" label="客户" />

    

    <el-table-column fixed="right" label="操作" width="60">
      <template #default="{ row }">
        <el-dropdown size="small" @command="handleCommand($event, row)" v-if="row.pkging">
          <span style="font-size: 13px">
            操作
            <el-icon>
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="delete"
                >删除</el-dropdown-item
              >
              <el-dropdown-item command="doPkg" 
                >确认</el-dropdown-item
              >              
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    style="margin-top: 22px"
    small
    layout="sizes,prev, pager, next, jumper, ->, total"
    :total="page.total"
    v-model:page-size="query.pageSize"
    v-model:current-page="query.pageNum"
    :page-sizes="[1, 3, 5, 10, 15, 20, 30, 100]"
    @current-change="getPage"
    @size-change="getPage(1)"
  />

  
</template>

<script setup >
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { tip, get, post, put, del, ddo, elConfirm } from "@/common";
import { Expand, Fold, Search, ArrowDown } from "@element-plus/icons-vue";

const elFormItemStyle = { margin: "0px 16px 15px 0px" };

const tableMaxHeight = computed(() => ddo.homeElCardBodyHeight - 200);

const queryMore = ref(false);

const props = defineProps({
  //获取基础信息
  infoList: {
    type: Array,
    default() {
      return [];
    },
  },
});

//获取基础信息
const cusList = computed(() =>
  props.infoList.filter((item) => item.info_type === 1)
);
const stdList = computed(() =>
  props.infoList.filter((item) => item.info_type === 2)
);
const colorList = computed(() =>
  props.infoList.filter((item) => item.info_type === 3)
);

//获取列表数据
const query = reactive({
  pageNum: 1,
  pageSize: 5,
  pd_id: "",
  store_id: "",
  product_id:"",
  plan_type: "",
  store_cus: "",
  store_std: "",
  plan_type: "", // 产品类型
  store_color: "",
  product_level: "",
  date_start: "",
  date_end: "",
});

//条件标签元数据
const getInfoName = (propVal, someList) => {
  const theItem = someList.value.find((item) => item.info_id == propVal);
  return theItem && theItem.info_name;
};
const queryTagMeta = [
  { range: false, desc: "状态", prop: "pd_id", getValue: (propVal) => ddo.text('storeStatus',propVal)},
  { range: false, desc: "成品号", prop: "product_id" },
  { range: false, desc: "包装号", prop: "store_id" },
  
  {
    range: false,
    desc: "产品客户",
    prop: "store_cus",
    getValue: (propVal) => getInfoName(propVal, cusList),
  },
  {
    range: false,
    desc: "产品规格",
    prop: "store_std",
    getValue: (propVal) => getInfoName(propVal, stdList),
  },
  {
    range: false,
    desc: "产品花色",
    prop: "store_color",
    getValue: (propVal) => getInfoName(propVal, colorList),
  },
  {
    range: false,
    desc: "产品类型",
    prop: "plan_type",
    getValue: (propVal) => ddo.text("prodTypes", propVal),
  },
  {
    range: false,
    desc: "质量等级",
    prop: "product_level",
    getValue: (propVal) => ddo.text("prodLevels", propVal),
  },

  {
    range: true,
    desc: "日期",
    start: "date_start",
    end: "date_end",
  },
];

//以选择条件标签
const tags = computed(() => {
  const arr = [];

  queryTagMeta.forEach((meta) => {
    if (meta.range) {
      (query[meta.start] || query[meta.end]) &&
        arr.push({
          ...meta,
          value: meta.getValue
            ? meta.getValue(query[meta.start], query[meta.end])
            : `${query[meta.start]} ~ ${query[meta.end]}`,
        });
    } else {
      (query[meta.prop] || query[meta.prop] === false) &&
        arr.push({
          ...meta,
          value: meta.getValue
            ? meta.getValue(query[meta.prop])
            : query[meta.prop],
        });
    }
  });
  return arr;
});

const removeTag = (tag) => {
  if (tag.range) {
    if (typeof query[tag.start] === "number") {
      query[tag.start] = 0;
      query[tag.end] = 0;
    } else {
      query[tag.start] = "";
      query[tag.end] = "";
    }
  } else {
    if (typeof query[tag.start] === "number") {
      query[tag.prop] = 0;
    } else {
      query[tag.prop] = "";
    }
  }
  getPage(1);
};

const page = ref({ total: 0 });

const getPage = (pageNo) => {
  query.pageNum = pageNo || 1;
  get("/process/pkg/pkg-list", query).then((result) => {
    page.value = result.data;
    query.pageNum = page.value.current;
    query.pageSize = page.value.pageSize;
  });
};

getPage(1);

const emit =  defineEmits(["del-pkg-success","confirm-pkg-success"]);

//删除
const execDel = (id) => {
  elConfirm("提示", "您确定删除该包装数据吗？").then(() => {
    del(`/process/pkg/${id}`).then((result) => {
      emit("del-pkg-success");
      tip.success("删除包装数据成功！");
    });
  });
};


//确认包装数据
const execConfirm = (row) => {
  put(
    `/process/pkg/done/${row.store_id}`,
    {},
    { title: "提示", message: "您该包装数据吗？" }
  ).then((result) => {
    emit("confirm-pkg-success");
    tip.success("确定包装数据成功！");
  });
};

const handleCommand = (command, row) => {
  switch (command) {
    case "delete":
      execDel(row.store_id);
      break;    
    case "doPkg":
      execConfirm(row);
      break;
  }
};

const refresh = () => getPage(page.value.current);
defineExpose({ refresh });
</script>

<style scoped>
.x {
}

.slide-fade-enter-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-leave-active {
  /* transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); */
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(300px);
  opacity: 0;
}
</style>